<template>
 
  <div >
    <a-card>
      <SetTimeout
        label="放假倒计时"
        width="600px"
        hieght="500px"
        @time-end="timeEnd"
      />
      <div style="margin-top: 10px">
        <a-input v-model:value="value" placeholder="搜索" @change="inputChange(value)" :disabled="!checked" />
      </div>
      <a-list class="list" size="small" bordered :data-source="searchData">
        <!-- <template #header>
          <div>搜索列表</div>
        </template> -->
        <template #renderItem="{ item }">
          <a-list-item>{{ item.content }}</a-list-item>
        </template>
        <!-- <template #footer>
          <div>底部</div>
        </template> -->
      </a-list>
      <div style="margin-top: 10px">
        <a-switch v-model:checked="checked" />
      </div>
      <div style="margin-top: 10px">
        <a-textarea v-model:value="textarea" show-count :maxlength="100" />
        <a-progress :percent="percent" />
      </div>

      <div>
        <a-popconfirm
          title="Are you sure delete this task?"
          ok-text="Yes"
          cancel-text="No"
          @confirm="() => {}"
          @cancel="() => {}"
        >
          <a href="#">Delete</a>
        </a-popconfirm>
      </div>
      <div>
         <a-space :size="percent">
          <a-button type="primary">Primary</a-button>
          <a-button>Default</a-button>
          <a-button type="dashed">Dashed</a-button>
          <a-button type="link">Link</a-button>
        </a-space>
      </div>
       
      <a-typography-paragraph
        :ellipsis="checked"
        content=" Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
        Design, a design language for background applications, is refined by Ant UED Team. Ant
        Design, a design language for background applications, is refined by Ant UED Team. Ant
        Design, a design language for background applications, is refined by Ant UED Team. Ant
        Design, a design language for background applications, is refined by Ant UED Team. Ant
        Design, a design language for background applications, is refined by Ant UED Team."
      />
      <!-- 级联选择框 -->
      <a-cascader v-model:value="cascader" :options="options" />
      <!-- 输入框 -->
      <textarea style="resize: none;outline: none;vertical-align: top;border: 1px solid #d9d9d9;" cols="20" rows="3"></textarea>
      <a-date-picker v-model:value="date" />
      
    </a-card>

  </div>
</template>
<script lang="ts" setup>
import {reactive, ref, computed, watch, } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'
import dayjs, { Dayjs } from 'dayjs'
import SetTimeout from '@/components/SetTimeout.vue'
import { functionsIn } from 'lodash'

/**
  const set = new Set(['red', 'green', 'blue'])
  let n1 = new Set([1, 2, 3])
  let n2 = new Set([2, 3, 4])
  // 并集
  let union = new Set([...n1, ...n2])
  // 交集
  let intersect = new Set([...n1].filter(x => n2.has(x)))
 */
// 搜索列表
interface dataType {
  id: number,
  content: string
}
// 原始数组
const data: dataType[] = [
  {id: 1, content: 'Racing car sprays burning fuel into crowd.'},
  {id: 2, content: 'Japanese princess to wed commoner.'},
  {id: 3, content: 'Australian walks 100km after outback crash.'},
  {id: 4, content: 'Man charged over missing wedding girl.'},
  {id: 5, content: 'Los Angeles battles huge wildfires.'},
  {id: 6, content: 'Los Angeles battles huge wildfires.'},
  {id: 7, content: 'n battles huge wildfires.'},
  {id: 8, content: 'Los v , huge wildfires.'},
]

// 搜索展示的数组
//  ref<dataType[]> = searchData.value<dataType[]>
const searchData  = ref<dataType[]>(data)

const value = ref<string>('')
const inputChange = (e: string) => {
  const newArr = data.filter(item => item.content.includes(e))
  searchData.value = newArr
}

// Switch
const checked = ref<boolean>(true)

// input输入框字数限制显示
const textarea = ref<string>('')
// 计算进度
let percent = computed(() => textarea.value.length)

const flatten = (arr: any[]): any => {
  return arr.reduce((acc, cur) => {
    return Array.isArray(cur) ? [...acc, ...flatten(cur)] : acc.concat(cur)
  }, [])
}
// console.log(flatten([1, [2, [3, [4, [5]]]]]), 'flatten')

const current = ref(1)


// 泛型
// function identity<T>(args: T): T{
//   return args
// }
const identity = <T>(args: T) => args

const i = (args: any): void => {
  return args
}

let res1 = identity<number>(10)
let res2 = identity<string>('str')
// console.log(res1, res2)



// const f = <T1 extends {}>(arg1: T1) => <T2 extends {}>(arg2: T2) => {
//   console.log(arg1, arg2, '???')
//   return { arg1, arg2 }
// }
// f('a')('b')


const cascader = ref<string[]>([])

interface Option {
  value: string
  label: string
  children?: Option[]
}
const options: Option[] = [
  {
    value: 'value1',
    label: 'label1',
    children: [
      {
        value: 'value1 - 1',
        label: 'label1 - 1',
        children: [
          {
            value: 'value1 - 1- 1',
            label: 'label1 - 1 -1'
          }
        ]
      }
    ]
  },
  {
    value: 'value2',
    label: 'label2'
  },
  {
    value: 'value3',
    label: 'label3',
    children: [
      {
        value: 'value3 - 3',
        label: 'label3 - 3',
      }
    ]
  }
]

const date = ref<Dayjs>()

const timeEnd = (e: any) => {
  console.log(e, 'e')
}



// 递归求 1-100和
function sum(n: number): number{
  if (n === 1) return n
  return sum(n - 1) + n
}
// console.log(sum(100), '1-100和')


// 统计localStorage 使用空间和剩余空间
function cUSize(){
  // console.log(localStorage, 'localStoragelocalStorage')
  return (
    Object.entries(localStorage)
    // 将全部内容转换为字符串并计算长度
    .map(v => v.join(''))
    .join('').length
  )
}
function cSSize(){
  const count = 5 * 1024 * 1024
  const uSize = cUSize()

  return count - uSize
}
console.log(cSSize(), 'cSSize')


</script>
<style lang="scss" scoped>
.list {
  overflow: auto;
  margin-top: 10px;
  height: 275px;
}
</style>